<!--
  科室排名
-->

<template>
  <Wrapper style="height:100%" title="科室排名">
    <div ref="department" style="height:100%" class="echartStackLineWrapper" />
  </Wrapper>
</template>

<script>
import * as echarts from 'echarts';
import Wrapper from '../../component/card.vue';
import BigScreenApi from '../api';
export default {
  components: {
    Wrapper,
  },
  data() {
    return {
      data: null,
    };
  },
  computed: {
    Data() {
      return this.data;
    },
    Option() {
      return {
        backgroundColor: 'transparent',
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0,0,0,0.80)',
          borderWidth: 0,
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
            shadowStyle: {
              color: 'transparent',
            },
          },
          textStyle: {
            color: '#fff',
          },
          // formatter: '{a}{b}{c}{c1}{c2}{d}{e}',
          // formatter: (params) => {
          //   var result = '';
          //   params.forEach(function (item) {
          //     result += item.marker + ' ' + item.seriesName + ' : ' + item.value + '</br>';
          //   });
          //   return result;
          // },
        },
        legend: {
          selectedMode: false,
          textStyle: {
            color: '#C9E5FF',
          },
        },
        grid: {
          left: '28%',
          right: '15%',
          bottom: '0%',
          top: '6%',
          containLabel: false,
          show: false,
        },
        xAxis: {
          show: false,
        },
        yAxis: [
          {
            type: 'category',
            position: 'left',
            offset: 150,
            axisLabel: {
              align: 'left',
              width: 130,
              overflow: 'truncate',
              color: '#C9E5FF',
              rich: {
                a: {
                  color: '#E64645',
                },
                b: {
                  color: '#60E7FC',
                },
                c: {
                  color: '#7DC1FF',
                },
                d: {
                  color: '#C9E5FF',
                },
              },
              formatter: (value, index) => {
                let rich = '';
                if (index === 0) {
                  rich = 'a';
                } else if (index > 0 && index < 3) {
                  rich = 'b';
                } else if (index > 3 && index < 5) {
                  rich = 'c';
                } else {
                  rich = 'd';
                }
                return `{${rich}|No.${index + 1}    ${value}}`;
              },
            },
            // 坐标刻度
            axisTick: {
              show: false,
              alignWithLabel: false,
              length: 5,
            },
            axisLine: {
              show: false,
            },
            inverse: true,
            splitLine: { // 网格线
              show: false,
            },
            data: this.Data.names,
          },
          {
            type: 'category',
            offset: 30,
            axisLabel: {
              color: '#C9E5FF',
              fontWeight: 'bolder',
              formatter: (value, index) => {
                return `${value}个`;
              },
            },
            // 坐标刻度
            axisTick: {
              show: false,
              alignWithLabel: false,
              length: 5,
            },
            axisLine: {
              show: false,
            },
            splitLine: { // 网格线
              show: false,
            },
            // 是否是反向坐标轴。
            inverse: true,
            // 总数
            data: this.Data.series[3].data,
            // min: 0,
          }],
        series: [
          {
            name: this.Data.series[0].name,
            type: 'bar',
            stack: 'total',
            barWidth: 10,
            label: {
              show: true,
              color: '#fff',
              distance: 0,
              padding: 0,
              borderRadius: 0,
              formatter: (value, index) => {
                if (value.data) {
                  return value.data;
                }
                return '';
              },
            },
            tooltip: {
              formatter: '{a0}: {c0}<br />{b1}: {c1}',
            },
            itemStyle: {
              color: 'rgba(96, 231, 252, 0.2)',
              borderColor: 'rgba(96, 231, 252, 0.8)',
              borderWidth: 1,
            },
            z: 10,
            data: this.Data.series[0].data,
          },
          {
            name: this.Data.series[1].name,
            type: 'bar',
            stack: 'total',
            barWidth: 10,
            itemStyle: {
              color: 'rgba(24,144,255,0.2)',
              borderColor: 'rgba(24,144,255,0.8)',
              borderWidth: 1,
            },
            label: {
              show: true,
              color: '#fff',
              distance: 0,
              padding: 0,
              borderRadius: 0,
              formatter: (value, index) => {
                if (value.data) {
                  return value.data;
                }
                return '';
              },
            },
            z: 5,
            data: this.Data.series[1].data,

          },
          {
            name: this.Data.series[2].name,
            type: 'bar',
            stack: 'total',
            barWidth: 10,
            itemStyle: {
              color: 'rgba(23,230,154,0.2)',
              borderColor: 'rgba(23,230,154,0.8)',
              borderWidth: 1,
            },
            label: {
              show: true,
              color: '#fff',
              distance: 0,
              padding: 0,
              borderRadius: 0,
              formatter: (value, index) => {
                if (value.data) {
                  return value.data;
                }
                return '';
              },
            },
            z: 5,
            data: this.Data.series[2].data,

          }

        ],
      };
    },
  },
  watch: {
    Data: {
      handler() {
        this.initEchart();
      },
      deep: true,
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initData();
    });
  },
  methods: {
    initEchart() {
      const ref = this.$refs['department'];
      const E = echarts.init(ref);
      E.setOption(this.Option);
    },
    async initData() {
      const rs = await BigScreenApi.ProjectDeparment();
      this.data = rs;
    },
  },
};
</script>

<style>

</style>
